<script setup>
import AsideList from './aside-list.vue'
import { imageApi, addImageApi, changeImageApi, deleteImageApi } from '@/api/image'
import { onMounted, ref, reactive, computed } from 'vue'
import FromDrawer from './from-drawer.vue'
import { toast } from '@/utils/elnotification'

//加载动画
const loading = ref(false)

//选中图库分类id
const activeId = ref(0)
const emit = defineEmits(['change'])
//切换分类
const onChangeActiveId = (id) => {
  activeId.value = id
  emit('change', id)
}

//获取数据
const list = ref([])
const getData = async (p = null) => {
  if (typeof p === 'number') {
    currentPage.value = p
  }

  loading.value = true
  const res = await imageApi(currentPage.value)
  list.value = res.list
  total.value = res.totalCount
  if (res.list[0].id) {
    onChangeActiveId(res.list[0].id)
  }
  loading.value = false
}

//分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

const fromDrawerRef = ref(null)
const formRef = ref(null)

//打开表单
const onOpenfromDrawer = () => {
  editId.value = 0
  form.name = ''
  form.order = 50
  fromDrawerRef.value.open()
}

//定义表单数据
const form = reactive({
  name: '',
  order: 50
})

//编辑分类的id
const editId = ref(0)

//定义校验规则
const rules = { name: [{ required: true, message: '图库分类名称不能为空', trigger: 'blur' }] }

//提交表单
const onSubmit = async () => {
  const val = await formRef.value.validate((val) => val)
  if (!val) return
  fromDrawerRef.value.showLoading()
  if (editId.value) {
    try {
      //修改成功
      await changeImageApi(editId.value, form)
      toast('修改成功')
      fromDrawerRef.value.close()
      //获取新的数据
      getData()
    } catch (err) {
      toast('修改失败', 'error')
    } finally {
      fromDrawerRef.value.hideLoading()
    }
  } else {
    try {
      //新增成功
      await addImageApi(form)
      toast('新增成功')
      fromDrawerRef.value.close()
      //获取新的数据
      getData()
    } catch (err) {
      toast('新增失败', 'error')
    } finally {
      fromDrawerRef.value.hideLoading()
    }
  }
}

//编辑分类
const drawerTitle = computed(() => (editId.value ? '修改' : '新增'))
const onEdit = (item) => {
  const { id, name, order } = item
  form.name = name
  form.order = order
  editId.value = id
  fromDrawerRef.value.open()
}

//删除图库分类
const onDelete = async (id) => {
  fromDrawerRef.value.showLoading()
  try {
    //删除成功
    await deleteImageApi(id)
    toast('删除成功')
    fromDrawerRef.value.close()
    //获取新的数据
    getData()
  } catch (err) {
    toast('删除失败', 'error')
  } finally {
    fromDrawerRef.value.hideLoading()
  }
}
//暴露方法
defineExpose({ onOpenfromDrawer })

onMounted(() => {
  getData()
})
</script>

<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <AsideList
        :active="activeId == item.id"
        v-for="(item, index) in list"
        :key="index"
        @edit="onEdit(item)"
        @delete="onDelete(item.id)"
        @click="onChangeActiveId(item.id)"
      >
        {{ item.name }}
      </AsideList>
    </div>
    <div class="bottom">
      <el-pagination
        @current-change="getData"
        :current-page="currentPage"
        :page-size="limit"
        background
        layout="prev, next"
        :total="total"
      />
    </div>
  </el-aside>
  <FromDrawer ref="fromDrawerRef" @submit="onSubmit" :title="drawerTitle">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="110px" :inline="false">
      <el-form-item label="图库分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="form.order" :min="0" :max="1000" />
      </el-form-item>
    </el-form>
  </FromDrawer>
</template>

<style>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}

.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}
.image-aside .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}
</style>
